<template>
    <div class="page-wrapper">
        <BreadMenu />
        <div style="height:96%; background:#fff; padding:var(--mPadding); ">
			<div style="padding-bottom:var(--mPadding); display:flex; justify-content: flex-end;">
                <div class="flex-btn opacity" @click="handleExport">
			    	<img :src="Icon" />
                    <span>导出</span>
			    </div>
            </div>    
            <el-scrollbar height="94%">
                <TableWrapper ref="tableRef" :hasControls="false" :sourceData="tableData" :column="column" :hasBorder="true" :hasPagination="false" :noPadding="true" :combineMethod="handleCombine" />
            </el-scrollbar>
        </div>   
	</div> 
</template>

<script setup>
    import { watch, ref, reactive, onMounted, h } from 'vue';
    import { useRoute } from 'vue-router';
    import { getTaskInspection } from '@/api/task.js'; 
    import BreadMenu from '@/components/BreadMenu.vue';
    import { ElMessage } from 'element-plus';
	import TableWrapper from '@/components/TableWrapper/index.vue';
    import { createSheet, downloadExcel  } from '@/utils/excel.js';
    import Icon from '@/assets/icon-export.png';

    const tableRef = ref();
    const route = useRoute();
    const code = ref('');
    const tableData = ref([]);
    const merges = [];
    const column = [
        { label:'巡检对象', prop:'targetName', width:'10%'},
        { label:'巡检项名称', prop:'itemName', width:'15%' },
        { label:'标准与要求', prop:'itemNormAndDemand', width:'35%' },
        { label:'检查方法及工具', prop:'checkWayAndTool', width:'30%' },
        { label:'巡检周期', prop:'cycleName', width:'10%' },
    ]; 	
    function handleCombine({ row, column, rowIndex, columnIndex }){
        // console.log('row...', row);
        // console.log('column...', column);
        // console.log('rowIndex...', rowIndex);
        // console.log('columnIndex...', columnIndex);
        if ( columnIndex === 0 ) {
            if ( rowIndex === 0 ) {
                let obj = {
                    rowspan:tableData.value.length,
                    colspan:1
                }
                merges.push({ ...obj, rowIndex, columnIndex });
                return obj;
            } else {
                return {
                    rowspan:0,
                    colspan:0
                }
            }
        }
    }  
   
    function handleExport(){
        if ( tableData.value.length ) {
            downloadExcel([{ raw:createSheet(column, tableData.value, merges) }], '巡检任务巡检项');
        } else {
            ElMessage({
                type:'info',
                message:'数据源为空'
            })
        }
    }
    const fetchTaskInspection = ()=>{
		getTaskInspection({ missionCode:code.value })
		.then(res=>{
			if ( res.data.code === 200 ){
				tableData.value = res.data.data;
			}
		})
	};
    onMounted(()=>{
        if ( route.query.code) {
            code.value = route.query.code;
            fetchTaskInspection();
        }
    })
</script>

